import React, { useEffect } from 'react';

import styles from './adapt.css';

function useRemForOnePercentVW() {
  useEffect(() => {
    const htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = '1vw';
  }, []);
}

function useTraceWindowResize() {
  useEffect(() => {
    console.log('initsize', window.innerWidth, window.innerHeight);
    function onresize() {
      console.log('resize', window.innerWidth, window.innerHeight);
    }
    window.addEventListener('resize', onresize);
    return () => {
      window.removeEventListener('resize', onresize);
    };
  }, []);
}

/**
 * 实验自适应大屏
 * 假设自己在 1920*1080 大屏上，如果 html 空间不是，则自动设置 scale 调整
 */
export default function() {
  useRemForOnePercentVW();
  useTraceWindowResize();
  return (
    <div className={styles.normal}>
      <h1>Page adapt</h1>
      <p className={styles.useRem}>text with 2 rem size</p>
    </div>
  );
}
